/*
 * @Author: your name
 * @Date: 2021-11-12 16:41:27
 * @LastEditTime: 2021-11-22 17:07:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /www/demo/vue-router/examples/query/app.js
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = {
  template: `
    <div class="home">
      <h2>Home</h2>
      <p>hello</p>
    </div>
  `
}

const Parent = {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  beforeRouteUpdate(to, from, next) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    next()
  },
  template: `
    <div class="parent">
      <h2>Parent</h2>
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
  `
}

const Default = { template: '<div class="default">default</div>' }
const Foo = { template: '<div class="foo">foo</div>' }
const Bar = { template: '<div class="bar">bar</div>' }

const router = new VueRouter({
  mode: 'query',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
    {
      path: '/parent', component: Parent,
      children: [
        { path: '', component: Default },
        { path: 'foo', component: Foo },
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Transi11111111tions</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/parent?t=223">/parent</router-link></li>
        <li><router-link to="/parent?t=213&v=213">/parent/foo</router-link></li>
        <li><router-link to="/parent/bar?t=243">/parent/bar</router-link></li>
      </ul>
      <button @click="handlePush">push</button>
      <button @click="handleReplace">replace</button>
      <transition name="fade" mode="out-in">
        <router-view class="view"></router-view>
      </transition>
    </div>
  `,
  methods: {
    handlePush() {
      this.$router.replace({ path:'/parent',query: { selected: "2", t: 'replace', v: +new Date() } })
    },
    handleReplace() {
      this.$router.replace({ path:'/parent',query: { selected: "2" } })
    }
  }
}).$mount('#app');